<template>
	<view class="my-wrapper pageBg">
		<view :style="{height:getNavBarHeight()+'px'}"></view>
		<view class="userinfo-wrapper">
			<view class="avatar">
				<image class="pic" src="../../static/logo.png"></image>
			</view>
			<view class="ip">{{userInfo.IP}}</view>
			<view class="address" v-if="userInfo.address">来自: {{userInfo.address.city}}</view>
		</view>
		<view class="list" >
			<view class="item" v-for="(item,index) in list" @click="goList(index)">
				<view class="left">
					<uni-icons class="icon" :type="item.icon" size="30"></uni-icons>
					<text class="name">{{item.name}}</text>
				</view>
				<view class="right">
					<text class="num" v-if="item.num>=0">{{item.num}}</text>
					<uni-icons type="right" size="20" color="#acacac"></uni-icons>
				</view>
				<!-- #ifdef MP -->
				<button open-type="contact" class="server" v-if="item.name == '联系客服'">联系客服</button>
				<!-- #endif -->
				<!-- #ifndef MP -->
				<button @click="goTel" class="server" v-if="item.name == '联系客服'">联系客服</button>
				<!-- #endif -->
			</view>

		</view>

		<view class="list">
			<view class="item" v-for="item in list2">
				<view class="left">
					<uni-icons class="icon" :type="item.icon" size="30"></uni-icons>
					<text class="name">{{item.name}}</text>
				</view>
				<view class="right">
					<uni-icons type="right" size="20" color="#acacac"></uni-icons>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		apiUserInfo
	} from '@/api/index.js'
	import {getNavBarHeight} from "@/utils/system.js"

	onLoad(() => {
		getData()
	})

	const userInfo = ref({})
	const getData = async () => {
		let res = await apiUserInfo()
		userInfo.value = res.data
		list.value[0].num = res.data.downloadSize
		list.value[1].num = res.data.scoreSize
		console.log('res', res)
	}
	const list = ref([{
			icon: 'upload-filled',
			name: '我的下载',
			num: 1
		},
		{
			icon: 'star-filled',
			name: '我的评分',
			num: 1
		},
		{
			icon: 'chatboxes-filled',
			name: '联系客服'
		},
	])
	const list2 = ref(
		[{
				icon: 'notification-filled',
				name: '订阅更新'
			},
			{
				icon: 'flag-filled',
				name: '常见问题'
			},
		])

	const goTel = () => {
		uni.makePhoneCall({
			phoneNumber: '114' //仅为示例
		});
	}
	
	const goList = (index)=>{
		if(index == 0){
			uni.navigateTo({
				url:'/pages/classList/classList?name=我的下载&type=download'
			})
			return
		}
		if(index == 1){
			uni.navigateTo({
				url:'/pages/classList/classList?name=我的评分&type=score'
			})
			return
		}
	}
</script>

<style lang="scss" scoped>
	.my-wrapper {
		.icon {
			color: $brand-theme-color !important;
		}

		.userinfo-wrapper {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-bottom: 50rpx;
			padding-top: 50rpx;

			.avatar {
				width: 160rpx;
				height: 160rpx;

				.pic {
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
			}

			.ip {
				font-size: 40rpx;
				margin-top: 30rpx;
				margin-bottom: 15rpx;
			}

			.address {
				color: #acacac;
				margin-bottom: 50rpx;
			}
		}

		.list {
			width: 690rpx;
			margin: 0 auto;
			background: #fff;
			box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.2);
			border-radius: 20rpx;
			margin-bottom: 50rpx;

			.item {
				position: relative;
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 100%;
				height: 100rpx;
				border-bottom: 1rpx solid #ccc;
				padding: 0 20rpx 0 30rpx;

				.server {
					position: absolute;
					width: 100%;
					height: 100%;
					left: 0;
					background: #fff;
					opacity: 0;
				}

				&:last-child {
					border-bottom: 0;
				}

				.left {
					display: flex;
					align-items: center;

					.name {
						margin-left: 20rpx;
						color: #626263;
						margin-top: 8rpx;
					}
				}

				.right {
					display: flex;
					align-items: center;

					.num {
						color: #626263;
						line-height: 30rpx;
						margin-right: 4rpx;
						margin-top: -2rpx;
					}
				}
			}
		}
	}
</style>
<style lang="scss">
	.uni-icons {
		color: $brand-theme-color !important;
	}
</style>